<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>表单设计器</title>
		<link rel="icon" href="favicon.ico" />
	</head>

	<body>
		<div class="">
			<div class="navbar-layoutit" style="display: none;">
				<div class="navbar-header">
					<span class="navbar-brand">表单设计器</span>
				</div>
			</div>
			<div id="drag-workarea">
				<div id="layout-left">
					<div class="sidebar-nav">
						<div>
							<ul class="nav nav-list accordion-group">
								<li>
									<div class="bs-callout bs-callout-info">布局设置</div>
								</li>
								<li class="rows de-small">
									<div class="lyrow ui-draggable content-column">
										<div>
											<i class="glyphicon glyphicon-th"></i> 布局
										</div>
									</div>
								</li>
							</ul>
							<ul class="nav nav-list accordion-group">
								<li>
									<div class="bs-callout bs-callout-info">模型字段</div>
								</li>
								<li id="model-field-li" class="rows de-small">
									
								</li>
							</ul>
							<ul class="nav nav-list accordion-group">
								<li>
									<div class="bs-callout bs-callout-info">基本元素</div>
								</li>
								<li id="basic-components-li" class="rows de-small">
									
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="layout-main" class="ui-sortable none-form-horizontal" style="background-color: white;">

					<div class="lyrow ui-draggable content-column ui-draggable-handle formdesigner-v2021">
						<span class="btn-wrapper">
							<span title="拖动" class="btn-drag drag"><i class="glyphicon glyphicon-move"></i></span>
							<span title="删除" class="btn-remove remove-content-column"><i class="glyphicon glyphicon-trash"></i></span>
						</span>
						<div class="drag-form-title"><span contenteditable="false" class="laytitle">标题</span></div>
						<div class="drag-form-lay ui-sortable"></div>
					</div>

				</div>
				<div id="layout-right" style="overflow-x: visible; overflow-y: auto;">
					<div>
							<ul class="nav nav-list accordion-group">
								<li>
									<div class="bs-callout bs-callout-info">表单设置</div>
								</li>
								<li id="form-setting" class="rows de-small">
									<div class="form-group">
										<label for="formSetting-labelName">标签名称</label>
										<input type="text" class="form-control" id="formSetting-labelName" placeholder="标签名称">
										<p class="text-info">标签名称中可使用<code>&lt;br&gt;</code>换行</p>
									</div>
									
									<div class="form-group">
										<label for="formSetting-defaultValue">默认值</label>
										<input type="text" class="form-control" id="formSetting-defaultValue">
									</div>
									
									<div class="form-group">
										<label for="formSetting-width">宽度</label>
										<select class="form-control" id="formSetting-width">
											<option value="12">默认</option>
											<option value="6">50%</option>
										</select>
									</div>
									
									<div class="form-group">
										<label class="checkbox-inline">
											<input type="checkbox" id="formSetting-required" value="1"> 必填
										</label>
										<label class="checkbox-inline">
											<input type="checkbox" id="formSetting-readonly" value="1"> 只读
										</label>
									</div>
									
									<div class="form-group">
										<label for="formSetting-prefix">前缀</label>
										<input type="text" class="form-control" id="formSetting-prefix">
									</div>
									<div class="form-group">
										<label for="formSetting-suffix">后缀</label>
										<input type="text" class="form-control" id="formSetting-suffix">
									</div>
									
									
									<div class="form-group">
										<label for="formSetting-helperText">提示文本</label>
										<textarea id="formSetting-helperText" class="form-control" rows="2"></textarea>
									</div>	
									<div class="form-group">
										<label for="formSetting-helperText-Color">提示文本颜色</label>
										<!--<input id="formSetting-helperText-Color" type="text" class="form-control color-picker" readonly>-->
										<div id="formSetting-helperText-Color" class="bfh-colorpicker" data-name="formSetting-helperText-Color" data-color="#FF0000" data-align="right"></div>
									</div>	
									
									<div class="form-group">
										<label class="checkbox-inline">
											<input type="checkbox" id="formSetting-showWordcount" value="1"> 显示字数统计
										</label>
									</div>

								</li>
								
								<li>
									<div class="bs-callout bs-callout-info">校验设置</div>
								</li>
								<li class="rows de-small">
									<div class="form-group">
										<label for="formSetting-validateRule">校验规则</label>
										<select class="form-control" id="formSetting-validateRule">
											<option value="">无</option>
											<option value="ip">IP</option>
										</select>
									</div>
									
									<div class="form-group">
										<label for="formSetting-validateReg">正则校验</label>
										<input type="text" class="form-control" id="formSetting-validateReg">
									</div>
									
									<div class="form-group">
										<label for="formSetting-limit-1">长度限制</label>
										<div class="input-group">
											<span class="input-group-addon">最短</span>
											<input type="number" class="form-control" id="formSetting-limit-1">
											<span class="input-group-addon">最长</span>
											<input type="number" class="form-control" id="formSetting-limit-2">
										</div>
									</div>
									
								</li>
							</ul>
					</div>

				</div>
			</div>
		</div>
		<script src="assets/js/lib/require-2.3.6/require.js" data-main="assets/js/main"></script>
	</body>

</html>